<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h3>工作：{{person.job.type}}</h3>
  <h3>薪水：{{person.job.salary}}</h3>
  <h3>爱好：{{person.hobby}}</h3>
  <button @click = "changeInfo" type="">修改一个人的信息</button>
</template>

<script>
import {reactive} from "vue"

export default {
  
  name: "App",
  setup() {
    // reactive 只接受基本数据类型，不接受引用数据类型

    let person = reactive({
      name:"李四",
      age : 18,
      job:{
        type:"后端工程师",
        salary:"20k"
      },
      hobby:['抽烟','喝酒','烫头']
    })

    function changeInfo() {
      person.name = "张三";
      person.age = 27;
      person.job.type = "前端工程师";
      person.job.salary = "15k"
      person.hobby = ['游戏','音乐','电影']
      console.log(person)
    }
    return {
      changeInfo,
      person
    }
  },
};
</script>
